<template>
    <view class="flex items-center justify-between">
        <view class="SearchBox">
            <image src="../static/image/search.png" mode="scaleToFill" class="searchImg" />
            <up-input border="none" class="flex-1" :placeholder="placeholder" v-model="searchValue" @confirm="search"></up-input>
            <up-line direction="col" length="14"></up-line>
            <view class="searchText" @click="search">搜索</view>
        </view>
        <view class="carBox" @click="checkcar">
            <image src="../static/images/tabbar/car.png" mode="scaleToFill" class="icon" />
        </view>
    </view>
</template>
  
  <script setup>
  import { ref ,onMounted } from "vue";
  const searchValue = ref('');
  const emit = defineEmits(['search']);
  const props = defineProps({
    placeholder: {
      type: String,
      default: "请输入搜索内容",
    },
    search:{
      type:String,
      default:''
    }
  });
  let value = ref('')
  function search(){
    emit('search',searchValue.value)
  }
  function checkcar(){
    uni.navigateTo({
      url:'/pageOrder/ShoppingCart/ShoppingCart'
    })
  }
  onMounted(() => {
    value.value = props.search
  })
  </script>
  
  <style lang="scss" scoped>
  .SearchBox{
    display: flex;
    flex:1;
    align-items: center;
    padding: 16rpx 0;
    border: 1rpx solid #eee;
    border-radius: 16rpx;
    .searchImg{
        width: 40rpx;
        height: 40rpx;
        display: block;
        margin-left: 40rpx;
        margin-right: 24rpx;
    }
    .searchText{
        font-weight: 400;
        font-size: 28rpx;
        color: #46A7FD;
        padding: 0 24rpx;
    }
  }
  .carBox{
    margin-left: 32rpx;
    .icon{
      width: 56rpx;
      height: 56rpx;
      display: block;
    }
  }
  </style>
  